/**
 * OMS客户地址选择弹框
 */
import PopupSelection from '../../el/ItemComponent/PopupSelection';
import React from 'react';
import requests from '@/utils/request';
import { ElNotification } from '@/components/el';
import { ElFormProps } from '@/components/el/ElForm';
import { ElSearchTableColumns } from '@/components/el/ElSearchTable';
import request from '@/utils/request';
import { asserts } from '@/utils';
interface Props {
  recvAddrNo?: string | number;
  showColumns?: any;
}
interface State {
  popupSelection: any;
  telColumn: any;
}

const getTableSearchFormItems: ElFormProps = {
  wrapperCol: { span: 18 },
  labelCol: { span: 6 },
  items: [
    {
      title: '联系人',
      name: 'contPerson',
      span: 6,
      formOption: {
        type: '$input',
        props: {
          placeholder: '请输入联系人名称'
        }
      }
    }
  ]
};
const modalTableColumns = (contTel): Array<ElSearchTableColumns> => [
  {
    title: '联系人',
    width: 170,
    dataIndex: 'contPerson',
    align: 'left'
  },
  {
    title: '联系电话',
    width: 200,
    dataIndex: contTel,
    align: 'left'
  },
  {
    title: '联系地址',
    width: 200,
    dataIndex: 'contAddress',
    align: 'center'
  }
];

const columns = (contTel): Array<ElSearchTableColumns> => [
  {
    title: '联系人',
    width: 170,
    dataIndex: 'contPerson',
    align: 'left'
  },
  {
    title: '联系人电话',
    width: 200,
    dataIndex: contTel,
    align: 'left'
  },
  {
    title: '联系人地址',
    width: 200,
    dataIndex: 'contAddress',
    align: 'center'
  }
];

// 在此处组装所有的数据
class AddressPopupSelection extends React.Component<Props, State> {
  constructor(props) {
    super(props);
    this.state = {
      popupSelection: null, // 通过ref获取inputValue   popupSelection.state.inputValue
      telColumn: props.showColumns || 'contMobile'
    };
  }
  componentDidMount() {}
  onRef: any; //组件的ref

  /**
   * 分页请求
   * @param data
   * @returns
   */
  request = async (data) => {
    try {
      let res = await request(`/yst-sale/crm/cust/findAddrsByParam`, {
        method: 'POST',
        query: {
          ...data,
          addrNo: this.props?.recvAddrNo,
          orders: [{ asc: false, column: 'createTime' }]
        }
      });
      let orgAddrAddressVos = [];
      if (res) {
        // 处理请求返回数据 省市区的拼接显示
        res.data.forEach((item, index) => {
          const country = !asserts.isExist(item?.country) ? '' : item.country;
          // 把'CN', 'china' 变为中国
          item.newcountry = ['CN', 'china'].includes(country)
            ? '中国'
            : country;
          item.newprovince =
            !asserts.isExist(item?.provinceName) ||
            !asserts.isExist(item.newcountry)
              ? ''
              : '/' + item.provinceName;
          item.newcity =
            !asserts.isExist(item?.cityName) ||
            !asserts.isExist(item.newprovince)
              ? ''
              : '/' + item.cityName;
          item.newcounty =
            !asserts.isExist(item?.countyName) || !asserts.isExist(item.newcity)
              ? ''
              : '/' + item.countyName;
          item.newdetail =
            !asserts.isExist(item?.detailaddr) ||
            !asserts.isExist(item.newcounty)
              ? ''
              : '/' + item.detailaddr;
          item.contAddress =
            item.newcountry +
            item.newprovince +
            item.newcity +
            item.newcounty +
            item.newdetail;
          if (
            index < data.current * data.size &&
            (data.current - 1) * data.size <= index
          ) {
            orgAddrAddressVos.push(item);
          }
        });
        res = {
          success: true,
          data: {
            total: res.data?.length,
            records: orgAddrAddressVos
          }
        };
      }
      return res;
    } catch (error) {
      return {
        success: true,
        data: {
          total: 0,
          records: []
        }
      };
    }
  };

  /**
   * 错误请求回调
   * @param res
   */
  errCallBack = (res) => {
    ElNotification({
      type: 'error',
      message: res.msg || res.data || '操作失败！'
    });
  };

  render() {
    const { telColumn } = this.state;
    return (
      <>
        <PopupSelection
          rowKey='addrId'
          modalTitle='请选择联系人'
          // scroll={{ x: 'max-content' }}
          tableProxy={{
            request: this.request,
            successCallBack: () => {},
            errCallBack: this.errCallBack,
            props: {
              success: 'success',
              result: 'data.records',
              total: 'data.total'
            },
            autoLoad: true
          }}
          modalTableColumns={modalTableColumns(telColumn)}
          columns={columns(telColumn)}
          searchFormProps={getTableSearchFormItems}
          needModal={true}
          onRef={this.onRef}
          // value={this.props.value}
          // onChange={this.props.onChange}
          overLayWidth={600}
          {...this.props}
        />
      </>
    );
  }
}
export default AddressPopupSelection;
